<template>
  <Sider hide-trigger :style="{background: '#fff',width:'230px',maxWidth:'230px',minWidth:'230px',height:'100%'}">
    <div class="menu_sider">
      <!-- 用户信息 -->
      <div class="use_cont">
        <Row>
          <Col span="10">
            <div class="use_img">
              <img alt="头像" src="@/assets/user/avatar.png"/>
            </div>
          </Col>
          <Col span="14">
            <div class="use_txt">
              <div class="use_name">justinzyh</div>
              <p>像风一样自由</p>
            </div>
          </Col>
        </Row>
      </div>
      <div class="menu_cont">
        <Menu
          ref="menu"
          theme="dark"
          width="230px"
          :openNames="openName"
          :activeName="activeMenu"
          @on-open-change="aa"
          :accordion="true">
          <template v-for="item in lists">
            <MenuGroup :title="item.title" class="group_theme">
              <template v-for="gItem in item.group">
                <MenuItem :name="gItem.label" :to="gItem.path"  v-if="gItem.list.length === 0">
                  <Icon :type="gItem.icon"/>
                  {{gItem.name}}
                </MenuItem>
                <Submenu :name="gItem.label"  v-if="gItem.list.length !== 0">
                  <template slot="title">
                    <Icon :type="gItem.icon" size="20"></Icon>
                    {{gItem.name}}
                  </template>
                  <template v-for="lItem in gItem.list">
                    <MenuItem :name="lItem.label" :to="lItem.path">{{lItem.name}}</MenuItem>
                  </template>
                </Submenu>
              </template>
            </MenuGroup>
          </template>

          <MenuGroup title="相关链接" class="group_theme">
            <MenuItem name="official" to="/">
              <Icon type="logo-android" size="20"/>
              系统官网
            </MenuItem>
            <MenuItem name="about" to="/about">
              <Icon type="ios-at" size="20"/>
              关注我们
            </MenuItem>
          </MenuGroup>
        </Menu>
      </div>
    </div>
  </Sider>
</template>

<script>

  export default {
    name: 'vAside',
    props: {
      menus: {
        type: Array,
        default: null,
        required: true
      }
    },
    data() {
      return {
        activeMenu: '',
        openName: [],
        lists: []
      }
    },
    methods: {
        aa: function (item) {
            console.log(item)
        }
    },
    created() {
      this.lists = this.menus
      this.$bus.$off('getSubMenu').$on('getSubMenu', data => {
        this.openName.push(data.openName)
        this.activeMenu = data.activeName
        this.$nextTick(() => {
          this.$refs.menu.updateOpened()
          this.$refs.menu.updateActiveName()
        })
      })
    },
    mounted() {
    },
    beforeDestroy () {
      this.$bus.$off('getSubMenu', data => {
        this.activeMenu = null
        this.openName = null
      })
    }
  }
</script>

<style scoped lang="scss">
  .use_cont {
    width: 230px;
    background-color: #222e4a;
    padding: 20px 10px;
    border-bottom: 1px solid rgba(167, 158, 158, 0.1);

    .use_img {
      width: 60px;
      height: 60px;
      overflow: hidden;
      border-radius: 50%;
      display: block;
      margin: 0 auto;

      img {
        display: block;
        width: 100%;
      }
    }

    .use_txt {
      height: 60px;
      overflow: hidden;
      padding: 10px 5px;

      .use_name {
        font-weight: 600;
        font-size: 14px;
        color: #ffffff;
      }

      p {
        font-size: 12px;
        line-height: 22px;
        color: #ffffff;
      }
    }
  }

  .menu_sider {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: hidden;

    .menu_cont {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      overflow: auto;
      background-color: #055065;
      padding-bottom: 20px;
    }
  }

</style>
